<template>
  <view class="mine-top fadeIn">
    <image
      class="mine-top-back"
      :src="userInfor.backdrop"
      @click="editData"
      mode="aspectFill"
    ></image>
    <image
      class="mine-user-avatar"
      :src="userInfor.avatarUrl"
      @click="editData"
      mode="aspectFill"
    ></image>
    <view class="mine-user">
      <text class="user-nickname" @click="gotoLogin">{{ userInfor.nickname }}</text>
      <!-- 点赞+关注+粉丝数 -->
      <view class="global-display">
        <view
          class="user-data global-display global-a-items"
          v-for="(item, index) in userData"
          :key="index"
        >
          <text>{{ item.num }}</text>
          <text>{{ item.title }}</text>
        </view>
      </view>
      <!-- 年龄 -->
      <view class="age-view global-display global-a-items">
        <text v-if="userInfor.age != ''">{{ userInfor.age }}岁</text>
        <text v-if="userInfor.city != ''">{{ userInfor.city }}</text>
      </view>
      <!-- uid -->
      <view v-if="userInfor.uid" class="uid-view global-display global-a-items">
        <text>UID:&nbsp;&nbsp;</text>
        <text>{{ userInfor.uid }}</text>
      </view>
      <!-- 导航 -->
      <view class="user-navigation global-display global-a-items">
        <text v-for="(item, index) in userTab" :key="index" @click="juMp(item.route, index)">{{
          item.title
        }}</text>
      </view>
    </view>
  </view>
  <!-- 我的作品，收藏，喜欢 -->
  <div class="position-height"></div>
  <view class="container">
    <scroll-view class="tabs" scroll-x enable-passive scroll-with-animation>
      <view
        v-for="(item, index) in tabNav"
        :key="index"
        class="tab"
        :data-index="index"
        @tap="handleTabTap"
      >
        <view class="tab-text" :class="{ active: tabIndex === index }">{{ item }}</view>
        <view class="tab-underline" :class="{ activeBor: tabIndex === index }"></view>
      </view>
    </scroll-view>
  </view>
  <Mywork :userTravels="userTravels" :tip="tip" />
  <view style="height: 300rpx"></view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { onReachBottom,onLoad,onShow } from '@dcloudio/uni-app'
import { getUserCountAPI, getUserTravelListAPI } from '@/api/mine'
import type { UserTravelItemResponse } from '@/types/mine'
// 我的作品，收藏，喜欢组件
import Mywork from '@/components/my-work.vue'
// 点赞|关注|粉丝数
const userData = ref([
  {
    num: 0,
    title: '获赞',
  },
  {
    num: 0,
    title: '关注',
  },
  {
    num: 0,
    title: '粉丝',
  },
])
// 我的资料导航
const userTab = ref([
  {
    title: '编辑资料',
    route: '/pages/personal-data/personal-data',
  },
  {
    title: '密码设置',
    route: '/pages/password-settings/password-settings',
  },
])
// 存储用户基本信息
const userInfor = reactive({
  avatarUrl: '',
  backdrop: '',
  nickname: '',
  age: '',
  city: '',
  uid: '',
})
// 存储我的作品，收藏，喜欢
const userTravels = ref<UserTravelItemResponse[]>([])

// 添加onShow生命周期，每次页面显示时都刷新数据
onShow(() => {
  console.log('页面显示，刷新数据')
  getUserInfor()
  myData()
})

onLoad(async () => {
  uni.$on('loginSuccess', async data => {
    // 监听登录成功后触发
    console.log('登录成功事件触发')
    await myData()
  })
  uni.$on('uploadUserdata', async data => {
    // 监听修改个人信息成功后触发
    getUserInfor()
  })
  await myData()
})
// 骨架屏
const skeLeton = ref(true)
// 用于判断是否登录
const loginNot = ref(true)
async function myData() {
  try {
    console.log('开始获取用户数据')
    page.value = 1 //再次查询时要把页数置为1
    tabIndex.value = 0
    
    // 查询我收到的点赞，关注，粉丝数量
    try {
      const myRelated = await getUserCountAPI()
      console.log('获取用户计数数据:', JSON.stringify(myRelated))
      const { concernCount, fansCount, likeCount } = myRelated.data
      userData.value[0].num = likeCount
      userData.value[1].num = concernCount
      userData.value[2].num = fansCount
    } catch (countErr) {
      console.error('获取用户计数数据失败:', countErr)
    }
    
    // 查询我发布的游记
    try {
      const myTravel = await getUserTravelListAPI('works', 1)
      console.log('获取用户游记数据:', JSON.stringify(myTravel))
      userTravels.value = myTravel.data
    } catch (travelErr) {
      console.error('获取用户游记数据失败:', travelErr)
      userTravels.value = []
    }
    
    loginNot.value = true
    skeLeton.value = false
    
    // 获取用户基本信息
    getUserInfor()
    
    console.log('用户数据获取完成')
  } catch (err) {
    console.error('myData总体错误:', err)
    if (err == '401') {
      // 未登录，给默认头像，昵称，点击可再次触发登录
      loginNot.value = false
      userInfor.backdrop =
        'https://lvyou-1332935562.cos.ap-nanjing.myqcloud.com/ceshi%2FIMG_0601.PNG'
      userInfor.avatarUrl =
        'https://lvyou-1332935562.cos.ap-nanjing.myqcloud.com/ceshi%2FIMG_0600.PNG'
      userInfor.nickname = '点击登录'
    }
    skeLeton.value = false
  }
}
// 获取或修改个人信息
function getUserInfor() {
  try {
    const userInfo = uni.getStorageSync('userInfor')
    console.log('userInfo',userInfo);
    console.log('获取到的用户信息：', JSON.stringify(userInfo))
    
    if (userInfo) {
      // 检查必要的字段是否存在
      if (!userInfo.avatarUrl || !userInfo.nickname) {
        console.error('用户信息不完整:', userInfo)
      }
      
      // 使用可选链和默认值确保不会因为缺少字段而报错
      userInfor.avatarUrl = userInfo.avatarUrl || ''
      userInfor.backdrop = userInfo.backdrop || ''
      userInfor.nickname = userInfo.nickname || '未设置昵称'
      userInfor.uid = userInfo.uid || ''
      userInfor.age = userInfo.age || ''
      userInfor.city = userInfo.city || ''
      
      console.log('更新后的用户信息对象:', JSON.stringify(userInfor))
    } else {
      console.error('无法获取用户信息，storage中不存在userInfor')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}
const tabNav = ref(['作品', '收藏', '喜欢'])
// 存储我的作品收藏点赞接口
// const apiRe = ref(['/myTravEls', '/myCollEction', '/myLikeArticle'])
//存储选项卡选中哪个
const tabIndex = ref(0)
// 公共类型映射
const listTypes = ['works', 'collection', 'like'] as const
// 存储提示
const tipData = ref(['你还没有发布作品', '快去收藏游记吧', '你还没有喜欢的游记'])
const tip = ref('你还没有发布作品')
// 查询我的作品收藏点赞
async function handleTabTap(e: any) {
  const index = e.currentTarget.dataset.index
  tabIndex.value = index
  tip.value = tipData.value[tabIndex.value]
  page.value = 1 //再次查询时要把页数置为1
  const myTravel = await getUserTravelListAPI(listTypes[index], 1)
  userTravels.value = myTravel.data
}
// 上拉加载
const page = ref(1)
onReachBottom(async () => {
  page.value++
  const myTravel = await getUserTravelListAPI(listTypes[tabIndex.value], page.value)
  userTravels.value = [...userTravels.value, ...myTravel.data]
})
// 再次掉起登录
function gotoLogin() {
  if (!loginNot.value) {
    wx.navigateTo({ url: '/pages/login/login' })
  }
}
// 更新资料
function editData() {
  if (!loginNot.value) {
    wx.navigateTo({ url: '/pages/login/login' })
    return false
  }
  wx.navigateTo({ url: '/pages/personal-data/personal-data' })
}
// 导航路由
function juMp(router:string, index:number) {
  if (!loginNot.value) {
    wx.navigateTo({ url: '/pages/login/login' })
    return false
  }
  wx.navigateTo({ url: router })
}
</script>

<style>
.mine-top {
  height: 500rpx;
  position: relative;
}
.mine-top-back {
  width: 100%;
  height: 500rpx;
}
.mine-user {
  position: absolute;
  top: 400rpx;
  left: 0;
  right: 0;
  background-color: #fefefe;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  padding: 100rpx 40rpx 0 40rpx;
}
.mine-user-avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 8rpx solid #ffffff;
  position: absolute;
  bottom: 40rpx;
  left: 40rpx;
  right: 0;
  z-index: 999;
  display: inline-block;
  box-sizing: border-box;
  box-shadow: 10rpx 40rpx 40rpx rgba(217, 217, 217, 0.9);
}
.user-nickname {
  font-size: 40rpx;
  font-weight: bold;
}
.user-data {
  padding: 20rpx 20rpx 20rpx 0;
}
.user-data text:nth-child(1) {
  font-weight: bold;
  padding-right: 10rpx;
}
.user-data text:nth-child(2) {
  color: #8f9092;
  font-size: 28rpx;
}
.age-view text {
  font-size: 28rpx;
  background-color: #f3f3f4;
  border-radius: 6rpx;
  padding: 4rpx 10rpx;
  color: #74757b;
  margin: 0 10rpx 20rpx 0;
}
.uid-view text {
  color: #8f9092;
  font-size: 28rpx;
}
.user-navigation {
  text-align: center;
  margin-top: 20rpx;
}
.user-navigation text {
  background-color: #f3f3f4;
  font-size: 28rpx;
  flex: 1;
  padding: 20rpx 0;
  font-weight: bold;
  border-radius: 8rpx;
}
.user-navigation text:nth-child(2) {
  margin-left: 10rpx;
}
.user-navigation text:nth-child(1) {
  margin-right: 10rpx;
}
.position-height {
  height: 340rpx;
}
/* tab滑动导航栏 */
.tabs {
  white-space: nowrap;
  width: 100%;
}
.tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #999;
}
.active {
  color: #000;
}
.tab-underline {
  width: 50rpx;
  height: 8rpx;
  margin-top: 10rpx;
  border-radius: 4rpx;
}
.activeBor {
  background-color: #f8e254;
}
</style>
